<template>
  <div class="ada-homework">
    <div>
      <span class="titleSty">已发布作业</span>
    </div>
    <div class="homeworkList">
      <el-table
          :data="tableData.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%;"
          height="12.5rem">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="内容：">
                  <span>{{ props.row.content }}</span>
                </el-form-item>
                <el-form-item label="提交方式：">
                  <span>{{ props.row.putway }}</span>
                </el-form-item>
                <el-form-item label="创建时间：">
                  <span>{{ props.row.create_date }}</span>
                </el-form-item>
                <el-form-item label="截止时间：">
                  <span>{{ props.row.deadline }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
          label="日期"
          sortable
          prop="update_date">
          </el-table-column>
          <el-table-column
          label="科目"
          sortable
          prop="subject_name">
          </el-table-column>
          <el-table-column
          label="标题"
          prop="title">
          </el-table-column>
          <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
              <el-input
              v-model="search"
              size="mini"
              placeholder="输入标题搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
            size="mini"
            @click="EditHomework(scope.row)">编辑</el-button>
            <el-button
            size="mini"
            style="background-color: #66cccc"
            @click="DeleteHomework(scope.row)">删除</el-button>
          </template>
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import http from '../../../util/http';

  export default {
    name: 'refresh',
    inject: ['reload'],
    data() {
      return {
        tableData: [],
        search: '',
      };
    },
    methods: {
      getHomeworkList() {
        http.get(`/homeworkAPI/findHomework?id=${window.localStorage.getItem('userId')}`)
        .then((res) => {
          // console.log(res.resultMap.findHomework);
          // console.log(res.resultMap.findHomework.length);
          this.tableData = res.resultMap.findHomework;
        })
        .catch((error) => {
          console.log(error);
        });
      },
      EditHomework(row) {
        window.localStorage.setItem('homeworkID', row.id);
        this.$router.push('/AdaEditHomework');
      },
      DeleteHomework(row) {
        window.localStorage.setItem('homeworkID', row.id);
        this.$confirm('是否删除此条作业信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          http.put(`/homeworkAPI/deleteHomework?id=${window.localStorage.getItem('homeworkID')}`)
          .then((res) => {
            this.refresh();
          })
          .catch((error) => {
            console.log(error);
          });
          this.$message({
            type: 'success',
            showClose: true,
            message: '删除成功!',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            showClose: true,
            message: '已取消删除',
          });
        });
      },
      refresh() {
        this.reload();
      },
    },
    mounted() {
      this.getHomeworkList();
    },
  };
</script>
<style scoped>
.ada-homework{
  width: 19rem;
}
.titleSty{
  color: white;
  font-size: .7rem;
  margin: 0 0 0 .5rem;
}
.homeworkList{
  box-shadow:.1rem .06rem .15rem #888;
  margin-top: .5rem;
}
.demo-table-expand .el-form-item {
  margin: auto;
  width: 90%;
}
</style>
